function startrunning()
{ 


var count = 0;
var timer = 
	$.timer(
		function() {
			count++;
			if(count==25)
			exit;
			else
			$('#loyalty-counter').html(count);
		},
		20,
		true
	);	
	 		
	var chartpie = new Highcharts.Chart({
        chart: {
            renderTo: 'pie2nd',
            type: 'pie'
        },
  title: {
                text: ''
            },
			  exporting: {
            buttons: {

                printButton:{
                    enabled:false
                },
                exportButton: {
                    enabled:false
                },
            },
        },
			 credits: { enabled: false },    
        plotOptions: {
            pie: {
                 /* borderColor: '#000000',*/
                 innerSize: '60%',
                 dataLabels: {
                        enabled: false
                    },
                 point: {
                        events: {
                             legendItemClick: function () {
                                  return false; // <== returning false will cancel the default action
                                 }
                             }
                 },   
                showInLegend: true     
                  
            }
        },
        
        series: [{
            data: [
                ['New Submission', 44.2],
                ['Bid Accepted', 26.6],
                ['Now In passession', 20],
                ['All Vehicle', 8.5],
              
                ]}]
    },
    // using 
                                
    function(chartpie) { // on complete
        
        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;
    
    // Render the circle
    chartpie.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#FFF',
    }).add();

    // Render the text 
    chartpie.renderer.text('Revenue Report', 205, 190).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '16px',
            textAlign: 'center'
      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999
        }).add();
    });
  var  chart = new Highcharts.Chart({
        
        chart: {
            renderTo: 'container', 
            backgroundColor: '#171717', 
            plotBackgroundColor: '#171717',
			
        },
          exporting: {
            buttons: {

                printButton:{
                    enabled:false
                },
                exportButton: {
                    enabled:false
                },
            },
        },
        credits: { enabled: false },
        legend: {
           
        },
         title: {
                text: '',
                x: -20 //center
            },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        series: [{
        	name:'Tower',
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
            color: '#468847'            
        }, {
        	name:'Partner',
            data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1], 
            color: '#F89406'            
        }]
    });
	var chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container2',
                 backgroundColor: '#171717', 
            plotBackgroundColor: '#171717',
                plotShadow: false
            },
            title: {
                text: ''
            },
			  exporting: {
            buttons: {

                printButton:{
                    enabled:false
                },
                exportButton: {
                    enabled:false
                },
            },
        },
			credits: { enabled: false },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#fff',
                        connectorColor: '#fff',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '',
                data: [
                    ['1st',   70],
                    ['2nd',   30]
                   
                ]
            }]
        });
		       var chart3first = new Highcharts.Chart({
            chart: {
                renderTo: 'leftcontainer',
                type: 'area',
				 backgroundColor: '#ffffff', 
            plotBackgroundColor: '#ffffff',
			  
            },
            title: {
                text: ''
            },
			 exporting: {
            buttons: {

                printButton:{
                    enabled:false
                },
                exportButton: {
                    enabled:false
                },
            },
        },
            credits: { enabled: false },
            subtitle: {
                text: ''
            },
            xAxis: {
                labels: {
                    formatter: function() {
                        return this.value; // clean, unformatted number for year
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                labels: {
                    formatter: function() {
                        return this.value / 1000 +'k';
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    return this.series.name +' -'+
                        Highcharts.numberFormat(this.y, 0);
                }
            },
            plotOptions: {
                area: {
                    pointStart: 0,
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'New Submission',
                data: [20, 104, 42424, 1234, 11111, 12345 , 66666, 23456, 45667, 56787, 23456, 22222,
                    1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                    27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342]
            }]
        });
		 var chart3snd = new Highcharts.Chart({
        chart: {
            renderTo: '3rdist',
            type: 'pie'
        },
		 title: {
                text: ''
            },
			 exporting: {
            buttons: {

                printButton:{
                    enabled:false
                },
                exportButton: {
                    enabled:false
                },
            },
        },
 credits: { enabled: false },
        plotOptions: {
            pie: {
                 /* borderColor: '#000000',*/
                 innerSize: '60%',
                 dataLabels: {
                        enabled: false
                    },
                 point: {
                        events: {
                             legendItemClick: function () {
                                  return false; // <== returning false will cancel the default action
                                 }
                             }
                 },   
                showInLegend: true     
                  
            }
        },
        
        series: [{
        	name:'Report',
            data: [
                ['New Vehicle', 44.2],
                ['Bid Accepted', 26.6],
                ['Now in Possession', 20],
                ['All Vehicle', 8.5],
                ]}]
    },
    // using 
                                     
    function(chart3snd) { // on complete
        
        var xpos = '50%';
        var ypos = '53%';
        var circleradius = 102;
    
    // Render the circle
    chart3snd.renderer.circle(xpos, ypos, circleradius).attr({
        fill: '#FFF',
    }).add();

    // Render the text 
    chart3snd.renderer.text('Submission Report', 80,130).css({
            width: circleradius*2,
            color: '#4572A7',
            fontSize: '12px',
            textAlign: 'center'
      }).attr({
            // why doesn't zIndex get the text in front of the chart?
            zIndex: 999
        }).add();
    });
var bubchart = new Highcharts.Chart({
   chart: {
      renderTo: 'bub2nd', 
      defaultSeriesType: 'scatter'
   },
    exporting: {
            buttons: {

                printButton:{
                    enabled:false
                },
                exportButton: {
                    enabled:false
                },
            },
        },
 credits: { enabled: false },
   title: {
      text: ''
   },
   subtitle: {
      text: ''
   },
   xAxis: {
	  minPadding: 0.1,
	  maxPadding: 0.1,
      title: {
         enabled: true,
         text: 'Nos '
      }
   },
   yAxis: {
      title: {
         text: 'Value'
      }
   },
   tooltip: {
      formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
            this.x +' '+ this.y ;
      }
   },
   legend: {
      layout: 'vertical',
      style: {
         left: '100px',
         top: '70px',
         bottom: 'auto'
      },
	  backgroundColor: '#FFFFFF',
      borderWidth: 1
   },
   plotOptions: {
      scatter: {
         marker: {
            radius: 5,
            states: {
               hover: {
                  enabled: true,
                  lineColor: 'rgb(100,100,100)'
               }
            }
         },
         states: {
            hover: {
               marker: {
                  enabled: false
               }
            }
         }
      }
   },
   series: [{
   	name:'New Vehicle',
      data: [{
			x: 161.2, 
			y: 51.6,
			marker: {
				radius: 15,
				fillColor: 'rgb(190, 30, 40)'
			}
		},
		{
			x: 197.2, 
			y: 91.6,
			marker: {
				radius: 15,
				fillColor: 'rgb(200, 20, 20)'
			}
		},
		{
			x: 191.2, 
			y: 4.6,
			marker: {
				radius: 15,
				fillColor: 'rgb(255, 255, 2)'
			}
		},
		{
			x: 190.2, 
			y: 70.6,
			marker: {
				radius: 15,
				fillColor: 'rgb(255, 0, 255)'
			}
		},		{
			x: 167.5, 
			y: 59.0,
			marker: {
				radius: 5,
				fillColor: 'rgb(0, 255, 255)'
			}
		}, {
			x: 159.5,
			y: 49.2,
			marker: {
				radius: 10,
				fillColor: 'rgb(0, 0, 255)'
			}
		},
		{
			x: 171.2, 
			y: 51.6,
			marker: {
				radius: 15,
				fillColor: 'rgb(255, 0, 0)'
			}
		},
		{
			x: 191.2, 
			y: 70.6,
			marker: {
				radius: 15,
				fillColor: 'rgb(255, 0, 0)'
			}
		},]

   }]
});	
	var chart;
				  var  barchartbottom = new Highcharts.Chart({
            chart: {
                renderTo: 'barcontainer4',
                type: 'bar',
				  backgroundColor: '#fbfbfb', 
            plotBackgroundColor: '#fbfbfb'
            },
            title: {
                text: ''
            },
            subtitle: {
                text: ''
            },
				  exporting: {
            buttons: {

                printButton:{
                    enabled:false
                },
                exportButton: {
                    enabled:false
                },
            },
        },
            xAxis: {
                categories: ['California', 'Alaska', 'Colorado', 'Florida', 'Arizona'],
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Value ',
                    align: 'high'
                },
                labels: {
                    overflow: ''
                }
            },
            tooltip: {
                formatter: function() {
                    return ''+
                        this.series.name +': '+ this.y ;
                }
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
     
            credits: {
                enabled: false
            },
            series: [{
                name: 'January',
                data: [107, 31, 635, 203, 2]
            }, {
                name: 'February',
                data: [133, 156, 120, 408, 6]
            }, {
                name: 'March',
                data: [100, 114, 100, 120, 34]
            }]
        });
   
					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'pie_chart',
							plotBackgroundColor: null,
							plotBorderWidth: null,
							plotShadow: false
						},
						title: {
							text: ''
						},
						  exporting: {
							buttons: {

								printButton:{
									enabled:false
								},
								exportButton: {
									enabled:false
								},
							},
						},
						 credits: { enabled: false },
						tooltip: {
							pointFormat: '{series.name}: <b>{point.percentage}%</b>',
							percentageDecimals: 1
						},
						plotOptions: {
							pie: {
								allowPointSelect: true,
								cursor: 'pointer',
								dataLabels: {
									enabled: true,
									color: '#000000',
									connectorColor: '#000000',
									formatter: function() {
										return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
									}
								}
							}
						},
						series: [{
							type: 'pie',
							name: 'Status',
							data: [
								['New Vehicle',   45.0],
								['Bid accepted',      55.0],
								/**{
									name: 'Chrome',
									y: 12.8,
									sliced: true,
									selected: true
								}**/
							]
						}]
					});
					
					chart = new Highcharts.Chart({
						chart: {
							renderTo: 'column_chart',
							type: 'column'
						},
						title: {
							text: ''
						},
						  exporting: {
							buttons: {

								printButton:{
									enabled:false
								},
								exportButton: {
									enabled:false
								},
							},
						},
						 credits: { enabled: false },
						subtitle: {
							text: ''
						},
						xAxis: {
							categories: [
								'Jan',
								'Feb',
								'Mar'
							]
						},
						yAxis: {
							min: 0,
							title: {
								text: 'Value '
							}
						},
					
						tooltip: {
							formatter: function() {
								return ''+
									this.x +': '+ this.y +' mm';
							}
						},
						plotOptions: {
							column: {
								pointPadding: 0.2,
								borderWidth: 0
							}
						},
							series: [{
							name: 'New Submission',
							data: [49.9, 71.5, 106.4]
				
						}, {
							name: 'Bid accepted',
							data: [83.6, 78.8, 98.5]
				
						}, {
							name: 'Now in possession',
							data: [48.9, 38.8, 39.3]
				
						}, {
							name: 'All Vehicle',
							data: [42.4, 33.2, 34.5]
				
						}]
					});
					
					//START:Area chart
					chart = new Highcharts.Chart({
            chart: {
                renderTo: 'area_chart',
                type: 'area'
            },
            title: {
                text: ''
            },
			  exporting: {
            buttons: {

                printButton:{
                    enabled:false
                },
                exportButton: {
                    enabled:false
                },
            },
        },
		 credits: { enabled: false },
            subtitle: {
                text: ''
            },
            xAxis: {
                labels: {
                    formatter: function() {
                        return this.value; // clean, unformatted number for year
                    }
                }
            },
            yAxis: {
                title: {
                    text: 'Value'
                },
                labels: {
                    formatter: function() {
                        return this.value / 1000 +'k';
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    return this.series.name +'-'+
                        Highcharts.numberFormat(this.y, 0);
                }
            },
            plotOptions: {
                area: {
                    pointStart: 0,
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [{
                name: 'New Vehicle',
                data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
                    1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                    27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                    26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                    24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                    22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                    10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
            }, {
                name: 'Bid Accepted',
                data: [null, null, null, null, null, null, null , null , null ,null,
                5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
                4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
                15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
                33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
                35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
                21000, 20000, 19000, 18000, 18000, 17000, 16000]
            }]
        });
					//END:Area chart
		
			
}
	function dash(id)
	{ 
	
		if(id=='dash1' || id=='dash0' )
		{
			$("#header_container").hide();
		}
		else
		{
			$("#header_container").show();
		}
		$('#header-pagination a').each(function (i) {
		$(this).removeClass('active');
		$("#div"+this.id).hide();
		
		});
		$('.right-block-sub a').each(function (i) {
			$(this).removeClass('active');
		});
		$("#"+id).addClass('active');
		$("#head"+id).addClass('active');
		$("#div"+id).show('');
			if(id=='dash5')
		{
			var bg1 = document.id('counter1');
			bg1.width = bg1.width;
			var ctx1 = bg1.getContext('2d');
			drawCircle(ctx1,0,$('#inner_circle1').html());

			var bg2 = document.id('counter2');
			bg2.width = bg2.width;
			var ctx2 = bg2.getContext('2d');
			drawCircle(ctx2,0,$('#inner_circle2').html());

			var bg3 = document.id('counter3');
			bg3.width = bg3.width;
			var ctx3 = bg3.getContext('2d');
			drawCircle(ctx3,0,$('#inner_circle3').html());

			var bg4 = document.id('counter4');
			bg4.width = bg4.width;
			var ctx4 = bg4.getContext('2d');
			drawCircle(ctx4,0,$('#inner_circle4').html());
			}
		 startrunning();
	}
